<template>
  <div>
    <!--目标: 点击按钮, 改变3个li的顺序, 在头上的就到末尾.
        提示: 操作数组里的顺序, v-for就会重新渲染li -->
        <ul>
          <li v-for="(item,index) in arr" :key="index">
            {{item}}
          </li>
        </ul>
      <button @click="getArr">点击按钮</button>
  </div>
</template>

<script>
export default {
  name:'APP',
  data() {
    return {
      arr:['帅哥','美女','程序员']
    }
  },
  methods:{
    getArr(){
      this.arr.reverse()
    }
  }
}
</script>

<style>

</style>